<template>
  <el-divider
    v-if="
      props.columnButton.divider &&
      (props.columnButton.iif ? props.columnButton.iif(scope.row) : true)
    "
    v-acl="props.columnButton.acl"
    :border-style="props.columnButton.divider || 'none'"
    direction="vertical"
  />
  <el-dropdown
    style="vertical-align: middle"
    trigger="click"
    v-if="props.columnButton.iif ? props.columnButton.iif(scope.row) : true"
    v-acl="props.columnButton.acl"
  >
    <span
      class="el-dropdown-link"
      :style="{ color: props.columnButton.color ?? 'var(--el-color-primary)' }"
    >
      {{ props.columnButton.text
      }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(b, i) in props.columnButton.children"
          :key="i"
        >
          <component
            :is="ST_COLLECTION[getButtonType(b)]"
            :column-button="b"
            :scope="scope"
          />
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup name="lc-st-dropdown">
import { NzSafeAny } from "../../sf/type";
import { ArrowDown } from "@element-plus/icons-vue";
import { ST_COLLECTION } from "../index";
import { ITableColumnButton } from "../interface";
const props = defineProps<{
  scope: NzSafeAny;
  columnButton: ITableColumnButton;
}>();
const getButtonType = (b: ITableColumnButton) => {
  return b?.children?.length ? "dropdown" : "button";
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown:hover {
  border: none !important;
}
</style>
../interface ../../sf/types ../interface
